import React from 'react';
import {Component} from 'react';

import './TopData2.less';

export default class TopData extends Component {

  constructor(props) {
    super(props);
  }

  editRealCount(realCount) {
    return realCount.toString().split('');
  }

  /**
   * 累计人数点击
   */
  handleRealCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('SMZS');
    }
  }

  /**
   * 今日新增人数点击
   */
  handleAddRealCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('SMXZ');
    }
  }

  /**
   * 今日上报体温人数点击
   */
  handleClockCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('TWSB');
    }
  }

  /**
   * 累计体温异常人数点击
   */
  handleBodyTemperatureExceptionCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('TWYC');
    }
  }

  /**
   * 累计填报出发地点击
   */
  handleDepartureCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('CFD');
    }
  }

  /**
   * 累计填报目的地点击
   */
  handleDestinationCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('MDD');
    }
  }

  /**
   * 累计已到岗点击
   */
  handleArriveCountClick() {
    const { onCountClick } = this.props;
    if (onCountClick) {
      onCountClick('YDG');
    }
  }

  render() {

    const {
      data: {
        realCount,
        addRealCount,
        fillLocalCount,
        fgryTotalCount,
        clockCount,
      }
    } = this.props;

    return (
      <div>
        <div>
          <span className="page-fgfc-top-right-title">全市实名制人员</span>
        </div>
        <div className="top-data2">
          <div className="top-data2-count-wrap">
            <div className="top-data2-count-wrap-inner" onClick={() => this.handleRealCountClick()}>
              <div className="top-data2-count-title">累计人数</div>
              <div className="top-data2-count-number-wrap">
                {
                  this.editRealCount(realCount).map(item => (
                    <div className="top-data2-count-number">{item}</div>
                  ))
                }
              </div>
            </div>
          </div>
          <div className="top-data2-right-count-wrap">
            <div className="top-data2-right-count-wrap-inner">
              <div className="top-data2-right-data-wrap" onClick={() => this.handleAddRealCountClick()}>
                <div className="top-data2-right-drxz-title">今日新增人数</div>
                <div className="top-data2-right-drxz-number">
                  <span>{addRealCount}</span>
                </div>
              </div>
              <div className="top-data2-right-data-wrap" onClick={() => this.handleClockCountClick()}>
                <div className="top-data2-right-drsbtw-title">今日上报体温</div>
                <div className="top-data2-right-drsbtw-number">
                  <span>{clockCount}</span>
                </div>
              </div>
              <div className="top-data2-right-data-wrap" onClick={() => this.handleBodyTemperatureExceptionCountClick()}>
                <div className="top-data2-right-ljtwyc-title">累计体温异常</div>
                <div className="top-data2-right-ljtwyc-number">
                  <span>0</span>
                </div>
              </div>
            </div>
            <div className="top-data2-right-count-wrap-inner">
              <div className="top-data2-right-data-wrap" onClick={() => this.handleDepartureCountClick()}>
                <div className="top-data2-right-ljtbcfd-title">累计填报出发地</div>
                <div className="top-data2-right-ljtbcfd-number">
                  <span>{fillLocalCount}</span>
                </div>
                <div className="top-data2-right-ljtbcfd-analyze">
                  数据分析
                </div>
              </div>
              <div className="top-data2-right-data-wrap" onClick={() => this.handleDestinationCountClick()}>
                <div className="top-data2-right-ljtbmdd-title">累计填报目的地</div>
                <div className="top-data2-right-ljtbmdd-number">
                  <span>{fillLocalCount}</span>
                </div>
                <div className="top-data2-right-ljtbmdd-analyze">
                  数据分析
                </div>
              </div>
              <div className="top-data2-right-data-wrap" onClick={() => this.handleArriveCountClick()}>
                <div className="top-data2-right-ljdgry-title">累计已到岗</div>
                <div className="top-data2-right-ljdgry-number">
                  <span>{fgryTotalCount}</span>
                </div>
                <div className="top-data2-right-ljdgry-analyze">
                  数据分析
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    );
  }
}
